<template>
  <div id="app">
    <h2>我是app组件</h2>
    <!-- router-link默认渲染为a标签，可以通过tag指定 -->
    <!-- replace指定，不能通过浏览器回退按钮 -->
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <!-- <router-link :to="'/user/' + userId" tag="button" replace>用户</router-link> -->
    <!-- 以问号的形式进行拼接 -->
    <!-- <router-link
      :to="{ path: '/profile', query: { name: 'why', age: '18' } }"
      tag="button"
      replance
      >档案</router-link
    > -->
    <!-- <button @click="homeClick">home</button>
    <button @click="aboutClick">about</button> -->
    <!-- 路由展位，router-link内容的展示 -->

    <!-- 通过点击按钮向路由传递参数 -->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    homeClick() {
      //通过代码的方式修改路径
      this.$router.replace("/home");
    },
    aboutClick() {
      this.$router.replace("/about");
    },
    userClick() {
      //第一种拼接传值方式
      this.$router.push("/user/" + this.userId);
    },
    profileClick() {
      //第二种query传值方式
      this.$router.push({
        path:'/profile',
        query:{
          name:'xiaoliang.shang',
          age:20
        }
      })
    }
  },
  data() {
    return {
      userId: "zhangsan"
    };
  }
};
</script>

<style>
.router-link-active {
  background-color: greenyellow;
}
</style>
